<template>
	<view v-if="is_loading" class="flex j-c a-c weisubao-loading" :style="'background-color: '+ maskBackgroundColor">
		<view class="" style="margin-top: -350rpx;">
			<image class="weisubao-loading-img" src="@/static/icon/lo.gif"></image>
		</view>
	</view>
</template>

<script>
	// * @property {String}  maskBackgroundColor 蒙版颜色
	// * @property {Number}  show_time 多少毫秒后显示内容
	// * @property {Boolean}  is_init ajax内容是否加载完成
	export default {
		name: 'loading',
		props: {
			maskBackgroundColor: {
				type: String,
				default: '#fff'
			},
			is_init: {
				type: Boolean,
				default: false
			},
			show_time: {
				type: Number,
				default: 500
			},
		},
		watch: {
			is_init: {
				handler: function(val) {
					setTimeout(() => {
						if (val == true) {
							this.is_loading = false
						}
					}, this.show_time)
				},
				immediate: true
			},
		},
		data() {
			return {
				is_loading: true
			}
		},
	}
</script>

<style>
	.weisubao-loading {
		position: fixed !important;
		width: 750rpx;
		height: 100vh;
		z-index: 99999;

	}

	.weisubao-loading-img {
		width: 60rpx;
		height: 60rpx;
	}
</style>